
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>翻页效果</title>

<meta name="viewport" content="width
=device-width,height=device-height,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<link rel="stylesheet" href="style.css">
<!--[if IE]><script type="text/javascript" src="excanvasX.js"></script><![endif]-->
<script type="text/javascript" src="js/jquery-1.2.6.min.js"></script>
<script type="text/javascript" src="js/jquery.jflip-0.4.js?id=1"></script>


<style type="text/css">
.flip_gallery,#l1 {margin:10px}
</style>

<style>
	.myButton {
	-moz-box-shadow: 0px 1px 0px 0px #fff6af;
	-webkit-box-shadow: 0px 1px 0px 0px #fff6af;
	box-shadow: 0px 1px 0px 0px #fff6af;
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #ffec64), color-stop(1, #ffab23));
	background:-moz-linear-gradient(top, #ffec64 5%, #ffab23 100%);
	background:-webkit-linear-gradient(top, #ffec64 5%, #ffab23 100%);
	background:-o-linear-gradient(top, #ffec64 5%, #ffab23 100%);
	background:-ms-linear-gradient(top, #ffec64 5%, #ffab23 100%);
	background:linear-gradient(to bottom, #ffec64 5%, #ffab23 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffec64', endColorstr='#ffab23',GradientType=0);
	background-color:#ffec64;
	-moz-border-radius:6px;
	-webkit-border-radius:6px;
	border-radius:6px;
	border:1px solid #ffaa22;
	display:inline-block;
	cursor:pointer;
	color:#333333;
	font-family:Arial;
	font-size:15px;
	font-weight:bold;
	padding:6px 24px;
	text-decoration:none;
	text-shadow:0px 1px 0px #ffee66;
}
.myButton:hover {
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #ffab23), color-stop(1, #ffec64));
	background:-moz-linear-gradient(top, #ffab23 5%, #ffec64 100%);
	background:-webkit-linear-gradient(top, #ffab23 5%, #ffec64 100%);
	background:-o-linear-gradient(top, #ffab23 5%, #ffec64 100%);
	background:-ms-linear-gradient(top, #ffab23 5%, #ffec64 100%);
	background:linear-gradient(to bottom, #ffab23 5%, #ffec64 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffab23', endColorstr='#ffec64',GradientType=0);
	background-color:#ffab23;
}
.myButton:active {
	position:relative;
	top:1px;
}
.myButton:disabled{
	opacity: 0.6;
}


.btn-download {
	-moz-box-shadow:inset 0px 1px 0px 0px #ffffff;
	-webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;
	box-shadow:inset 0px 1px 0px 0px #ffffff;
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #ededed), color-stop(1, #dfdfdf));
	background:-moz-linear-gradient(top, #ededed 5%, #dfdfdf 100%);
	background:-webkit-linear-gradient(top, #ededed 5%, #dfdfdf 100%);
	background:-o-linear-gradient(top, #ededed 5%, #dfdfdf 100%);
	background:-ms-linear-gradient(top, #ededed 5%, #dfdfdf 100%);
	background:linear-gradient(to bottom, #ededed 5%, #dfdfdf 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#dfdfdf',GradientType=0);
	background-color:#ededed;
	-moz-border-radius:6px;
	-webkit-border-radius:6px;
	border-radius:6px;
	border:1px solid #dcdcdc;
	display:inline-block;
	cursor:pointer;
	color:#777777;
	font-family:Arial;
	font-size:15px;
	font-weight:bold;
	padding:6px 24px;
	text-decoration:none;
	text-shadow:0px 1px 0px #ffffff;
}
.btn-download:hover {
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #dfdfdf), color-stop(1, #ededed));
	background:-moz-linear-gradient(top, #dfdfdf 5%, #ededed 100%);
	background:-webkit-linear-gradient(top, #dfdfdf 5%, #ededed 100%);
	background:-o-linear-gradient(top, #dfdfdf 5%, #ededed 100%);
	background:-ms-linear-gradient(top, #dfdfdf 5%, #ededed 100%);
	background:linear-gradient(to bottom, #dfdfdf 5%, #ededed 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#dfdfdf', endColorstr='#ededed',GradientType=0);
	background-color:#dfdfdf;
}
.btn-download:active {
	position:relative;
	top:1px;
}

#g1 img{
	width:300px;
	height:400px;
}

.more-line-hide{
	overflow : hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
}

</style>
</head>
<body>


<ul id="g1">
	<li>
		<img src="images/1.jpg" />
		<div class="text">
			1111这里是对应的文字呀这里是对应的文字呀这里是对应的文字呀这里是对应的文字呀这里是对应的文字呀
			这里是对应的文字呀这里是对应的文字呀这里是对应的文字呀这里是对应的文字呀这里是对应的文字呀
		</div>
	</li>
	<li>
		<img src="images/2.jpg" />
		<div class="text">
			2222这里是对应的文字呀这里是对应的文字呀这里是对应的文字呀这里是对应的文字呀这里是对应的文字呀
			这里是对应的文字呀这里是对应的文字呀这里是对应的文字呀这里是对应的文字呀这里是对应的文字呀
		</div>
	</li>
	<li>
		<img src="images/3.jpg" />
		<div class="text">
			3333这里是对应的文字呀这里是对应的文字呀这里是对应的文字呀这里是对应的文字呀这里是对应的文字呀
			这里是对应的文字呀这里是对应的文字呀这里是对应的文字呀这里是对应的文字呀这里是对应的文字呀
		</div>
	</li>
	<li>
		<img src="images/4.jpg" />
		<div class="text">
			4444这里是对应的文字呀这里是对应的文字呀这里是对应的文字呀这里是对应的文字呀这里是对应的文字呀
			这里是对应的文字呀这里是对应的文字呀这里是对应的文字呀这里是对应的文字呀这里是对应的文字呀
		</div>
	</li>
	<li>
		<img src="images/5.jpg" />
		<div class="text">
			5555这里是对应的文字呀这里是对应的文字呀这里是对应的文字呀这里是对应的文字呀这里是对应的文字呀
			这里是对应的文字呀这里是对应的文字呀这里是对应的文字呀这里是对应的文字呀这里是对应的文字呀
		</div>
	</li>
</ul>
<div id="text-here" class="more-line-hide">
	
</div>
<div id="l1">Image 1 of 5</div>
<button href="#" id="btn-prev" class="myButton">上一页</button>
<button href="#" id="btn-next" class="myButton">下一页</button>
 <a href="1.zip" class="btn-download">下载</a>
<script type="text/javascript">
(function($){    
	$(function(){ 
	   
		$("#g1").jFlip(300,400,{
			background:"green",
			cornersTop:false
		}).bind("flip.jflip",
		function(event,index,total){
			$("#l1").html("Image "+(index+1)+" of "+total);
		});
		var $btn_next = $('#btn-next');
		var $btn_prev = $('#btn-prev');
		$btn_prev.click(function(){
			$btn_prev.attr('disabled',true);
			$("canvas").trigger('click',false);
			setTimeout(function(){
				$btn_prev.attr('disabled',false);	
			},1000);
		});
		$btn_next.click(function(){
			$btn_next.attr('disabled',true);
			$("canvas").trigger('click',true);
			setTimeout(function(){
				$btn_next.attr('disabled',false);	
			},1000);
		});

		
	});
})(jQuery);
</script>
</body>
</html>

